<template>
  <div class="content">
    <!-- <div style="height:220px; background-color:#f0f2f5; border-radius:5px; ">
        <div class="headChart"></div>
        <div class="headChart"></div>
        <div class="headChart"></div>
        <div class="headChart"></div>
    </div> -->
    <div
      id="chart"
      style="height: 650px; background-color: #f0f2f5; border-radius: 5px;"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></div>
    <!-- <div style="height: 500px">
        <div class="bodyChart"></div>
        <div class="bodyChart"></div>
    </div>
    <div style="height:680px">
        <div class='bodyChart2'></div>
        <div class="bodyChart3"></div>
    </div> -->
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import moment from 'moment';
export default {
  data() {
    return {
      id: 0,
      loading: true,
    };
  },
  mounted() {
    this.initEchart();
  },
  computed: {
    ...mapState("datalist", ["datalist"]),
  },
  created() {
    this.id = setInterval(() => {
      this.findData();
    }, 7000);
  },
  methods: {
    ...mapActions("datalist", ["page_query"]),
    findData() {
      this.page_query({ page: 1, pageSize: 15 }).then(() => {
        var resProvince = this.datalist.list.map((item) => {
          return item.province;
        });
        var resDead = this.datalist.list.map((item) => {
          return item.dead;
        });
        var resCure = this.datalist.list.map((item) => {
          return item.cure;
        });
        var resConfirmed = this.datalist.list.map((item) => {
          return item.confirmed;
        });
        var resSuspected = this.datalist.list.map((item) => {
          return item.suspected;
        });
         var resOutside = this.datalist.list.map((item) => {
          return item.outside;
        });
         var resinputTime = this.datalist.list.map((item) => {
          return moment(item.inputTime).format("MM-DD");
        });
        
        console.log(resProvince, "===");
        console.log(resDead, "===");
        console.log(resinputTime,'=-----------=');
        
        // 累加求和
        var total_resDead = 0;
        resDead.forEach((item) => {
          total_resDead += item;
        });
        var total_resCure = 0;
        resCure.forEach((item) => {
          total_resCure += item;
        });
        var total_resConfirmed = 0;
        resConfirmed.forEach((item) => {
          total_resConfirmed += item;
        });
        var total_resSuspected = 0;
        resSuspected.forEach((item) => {
          total_resSuspected += item;
        });
        var time = resinputTime.reverse();
        var time_dataConfirmed = resConfirmed.reverse();
        var time_dataOutside = resOutside.reverse();

        this.initEchart(
          resProvince,
          resDead,
          resCure,
          resConfirmed,
          resSuspected,
          total_resSuspected,
          total_resDead,
          total_resCure,
          total_resConfirmed,
          resOutside,
          resinputTime,
          time,
          time_dataConfirmed,
          time_dataOutside
        );
        // this.initEchart();
      });
    },
    initEchart(
      resProvince,
      resDead,
      resCure,
      resConfirmed,
      resSuspected,
      total_resSuspected,
      total_resDead,
      total_resCure,
      total_resConfirmed,
      resOutside,
      resinputTime,
      time,
      time_dataConfirmed,
          time_dataOutside
    ) {
      echarts.init(document.getElementById("chart")).dispose();

      var myChart = echarts.init(document.getElementById("chart"));

      // 指定图表的配置项和数据
      // var option = {
      //   xAxis: {

      //     type: "category",
      //     data: res,
      //     axisLabel: {
      //       formatter(val) {
      //         return val.split("").join("\n");
      //       },
      //     },
      //   },
      //   yAxis: {
      //     type: "value",
      //   },
      //   series: [
      //     {
      //       data: res2,
      //       type: "line",
      //     },
      //   ],
      //    series: {
      //           type: 'pie',
      //           center: ['80%', '30%'],
      //           data: [
      //               {name: 'A', value: 1212},
      //               {name: 'B', value: 2323},
      //               {name: 'C', value: 1919}
      //           ]
      //       }

      // };
      var option1 = {
        //简单的 折线图+饼图 展示
         title: {
        text: '新型冠状肺炎疫情实时大数据报告',
        left: 'center',
        top: 0,
        textStyle:{
          fontWeight:'bolder',
          fontSize:30
        }
    },
        grid: [
          { x: "10%", y: "50%", width: "45%", height: "45%",tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} (人)",
        } },
          {top:'75%',right:'10%', width: '28%', height: '20%'},
          {top:'47%',right:'10%', width: '28%', height: '20%'},
          //折线图位置控制
        ],
        xAxis: [
          {
            name:'(例)',
            gridIndex: 0,
            type: "value",
            boundaryGap: [0, 0.01],
            data: [0, 50, 100, 150, 200, 250],
          },
          {
            name:'(日期)',
            gridIndex: 1,
            type: "category",
            boundaryGap: [0, 0.01],
            data: time,
          },
          {
            gridIndex: 2,
            type: "category",
            boundaryGap: [0, 0.01],
            data: ['河北','上海','辽宁','广东','山东','江苏','福建'],
          },
        ],
        yAxis: [
          {
            gridIndex: 0,
            type: "category",
            inverse: true,
            data: resProvince,
            axisLabel: {
              interval: 0,
            },
          },
          {
            name:'(例)',
            gridIndex: 1,
            type: "value",
            data: time_dataConfirmed,
            axisLabel: {
              interval: 0,
            },
          },
          {
            gridIndex: 2,
            type: "value",
            boundaryGap: [0, 0.01],
            data: [0,3,6,9,12,15],
             axisLabel:{formatter:'{value} 例'}
          },
        ],
         tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        },
    },
        
        legend: {
          itemWidth: 40,
          itemHeight: 20,
          orient: "horizontal",
          top:'10%',
          left: '44%',
          data: ["治愈率", "死亡率"],
          textStyle:{
            fontWeight:'bold',
            fontSize:15
          }
        },
        
        //     visualMap: {
        //     show: false,
        //     min: 80,
        //     max: 600,
        //     // inRange: {
        //     //     colorLightness: [0, 1]
        //     // }
        // },
        series: [
          // 各省死亡人数柱状图
          {
            name: "确诊人数",
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: resConfirmed,
            itemStyle: {
              normal: {
                color: "#EF4B4C",
              },
            },
          },

          {
            name: "治愈人数",
            type: "bar",
            gridIndex: 1,
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: resCure,
            itemStyle: {
              normal: {
                color: "#00E0C7",
              },
            },
          },
          // 右起饼图1
          {
            name: "人数统计",
            type: "pie",
            radius: "20%",
            center: ["80%", "20%"], //饼图位置控制
            data: [
              {
                value: total_resSuspected,
                name: "疑似人数",
                itemStyle: { 
                  color: "#355C7D",
                  show: true, 
								  },
              },
              {
                value: total_resDead,
                name: "死亡人数",
                itemStyle: { color: "#725A7A" },
              },
              {
                value: total_resCure,
                name: "治愈人数",
                itemStyle: { color: "#70AFCE" },
              },
              {
                value: total_resConfirmed,
                name: "确诊人数",
                itemStyle: { color: "#FF7582" },
              },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            labelLine: {
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            label:{
              fontWeight:'bold',
              fontSize:15,
              fontStyle:'italic',
              formatter: '{b}:\n {c}({d}%)'   
            }
          },
          // 饼图2
          {
            name: "治愈/病死",
            type: "pie",
            radius: ["20%", "10%"],
            center: ["50%", "30%"], //饼图位置控制
            data: [
              {
                value: "93.71",
                name: "治愈率",
                itemStyle: { color: "#00E0C7" },
              },
              {
                value: "4.93",
                name: "死亡率",
                itemStyle: { color: "#EF4B4C" },
              },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
                formatter: '{b}:\n {c}%'
              },
            },
            labelLine: {
              show: false,
            },
          },
          // 饼图3
          {
            type: "pie",
            radius: "20%",
            center: ["20%", "20%"], //饼图位置控制
             label:{
              fontWeight:'bold',
              fontSize:15,
              fontStyle:'italic',
              formatter: '{b}:\n {c}例'   
            },
            data: [
              { value: 24, name: "福建现有确诊", itemStyle: { color: "#355C7D" } },
              { value: 139, name: "河北现有确诊", itemStyle: { color: "#725A7A" } },
              { value: 105, name: "上海现有确诊", itemStyle: { color: "#C56C86" } },
              { value: 76, name: "辽宁现有确诊", itemStyle: { color: "#FF7582" } },
              { value: 37, name: "广东现有确诊", itemStyle: { color: "#70AFCE" } },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            labelLine: {
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
          },
          { 
            name:'全国 总新增确诊',
            type:'line',
            data: time_dataConfirmed,
            xAxisIndex: 1,
            yAxisIndex: 1,
            showSymbol: false,
        hoverAnimation: false,
          },
           {
             name:'全国 总新增境外输入确诊',
            type:'line',
            data:time_dataOutside,
            xAxisIndex: 1,
            yAxisIndex: 1,
            showSymbol: false,
        hoverAnimation: false,
          lineStyle:{ color:'#355C7D' } 
          },
          {
            name:'本土新增',
            stack:'新增确诊分布',
            type:'bar',
            xAxisIndex:2,
            yAxisIndex:2,
            data:[14,0,3,0,0,0,0],
            itemStyle: { color: "#FF7582" },
          },
          {
            name:'境外输入',
            stack:'新增确诊分布',
            type:'bar',
            xAxisIndex:2,
            yAxisIndex:2,
            data:[0,7,4,2,1,1,1],
             itemStyle: { color: "#70AFCE" },
          }
        ],
      };
    
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option1);
    },
  },
};
</script>

<style>
.content {
  width: 100%;
  /* background-color:#f0f2f5; */
}
/* .headChart {
  float: left;
  margin: 9px;
  width: 301px;
  height: 198px;
  border-radius: 5px;
  background-color: white;
}
.bodyChart {
  float: left;
  margin: 9px;
  width: 621px;
  height: 480px;
  border-radius: 5px;
  background-color: white;
}
.bodyChart2 {
  float: left;
  margin: 9px;
  margin-bottom: 0px;
  width: 1260px;
  height: 150px;
  border-radius: 5px;
  background-color: white;
}
.bodyChart3 {
  float: left;
  margin: 9px;

  width: 1260px;
  height: 500px;
  border-radius: 5px;
  background-color: white;
} */
</style>